<template>
  <div class="fix-bottom">
    <div class="fix-bottom flex-row-center" v-show="showFixBottom">
      <div class="fix-bottom-box flex-row-center">
        <el-image :src="fixBottom.phoneImage" class="phoneImage"></el-image>
        <div class="flex-col-center content">
          <div style="font-size: 24px;color: #4c4c4c">扫码下载学旅家APP</div>
          <div style="font-size: 14px;color: #696969;margin-top: 10px">随时随地查看新上房源与订单动态</div>
        </div>
        <el-image :src="fixBottom.qrCode" class="qrCode"></el-image>
      </div>
      <i @click="showFixBottom=false" class="el-icon-close" style="position: absolute;right: 5px;top: 5px;cursor: pointer;font-size: 25px"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "FixBottom",
  data() {
    return {
      showFixBottom:true,
      fixBottom:{
        phoneImage:"https://cdn.student.com/bundles/swagger/images/index-download-banner-bg-cn.e381f8f8.png",
        qrCode:"https://cdn.student.com/bundles/swagger/images/default.5a5eb070.png"
      },
    }
  },
  methods: {}
}
</script>

<style scoped lang="less">
.fix-bottom{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 90%;
  padding: 30px;
  background-color: white;
  z-index: 10;
  .fix-bottom-box{
    height: 104px;

    .phoneImage{
      position: relative;
      width:275px;
      left: 0;
      bottom: 48px;
    }
    .content{
      width: 390px;
      padding: 8px;
    }
    .qrCode{
      width: 104px;
      height: 100%;
    }
  }

}
</style>